import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'
import store from '../store'

// 原始 push() 方法
const originalPush = VueRouter.prototype.push
// 修改 push() 方法的定义
VueRouter.prototype.push = function(location, onComplete, onAbort) {
  if (onComplete || onAbort) {
    return originalPush.call(this, location, onComplete, onAbort)
  }
  return originalPush.call(this, location).catch(() => {})
}

// 原始 replace() 方法
const originalReplace = VueRouter.prototype.replace
// 修改 replace() 方法的定义
VueRouter.prototype.replace = function(location, onComplete, onAbort) {
  if (onComplete || onAbort) {
    return originalReplace.call(this, location, onComplete, onAbort)
  }
  return originalReplace.call(this, location).catch(() => {})
}

Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes,
})

// 需要登录才能访问的页面路由表
const permissionList = ['/mine', '/confirm']

// 全局前置守卫
// to: 即将要进入的目标路由对象
// from: 当前导航正要离开的路由
// next: 解析流程中的下一步，是一个函数，可传递不同的参数
//      next(): 正常流程中的下一步
//      next(false): 中断当前的导航
//      next(newPath): 下一步跳转到新路径中
//      next(error): 中断导航并抛出错误
// 可以在全局前置守卫中拦截用户是否已登录的权限
router.beforeEach((to, from, next) => {
  // 设置各页页面标题栏内容
  document.title = '发家致富 - ' + to.meta.title
  // 如果即将访问的路由包含在权限路由表中，则需要验证是否登录
  if (permissionList.includes(to.path)) {
    // 从 vuex 的 store 中获取用户登录的 token 数据，
    // 有 token 则说明已登录，没有 token 则需要跳转到登录页面
    const isLogin = store.state.user.token
    if (isLogin) {
      next()
    } else {
      next({
        name: 'login',
        params: {
          to,
        },
      })
    }
  } else {
    next()
  }
})

export default router
